<template lang="pug">
view.videoComponents
  video.video(autoplay loop :src="videoSrc" :controls="false" :show-play-btn="false" :show-center-play-btn="false" object-fit="cover")
    view.navBar(:style="{ height: `${height + statusBarHeight + 5}px`, paddingTop: statusBarHeight + 'px' }")
      image(@tap="back" src="/static/previewVideo/whiteBack.png")
    view.operate
      view.reShoot(@tap="reShoot")
        | 重新拍摄
      view.startInterpretation(@tap="startInterpretation()")
        | 开始解读吧
</template>
<script>
import {defineComponent,reactive, toRefs } from 'vue';
import config from '@/hooks/useConfig.js'
export default defineComponent({
    setup() {
        const { prefix_image,height, statusBarHeight }=config()
        const data = reactive({
            videoSrc:'http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4',
            height,
            statusBarHeight
        })
        const startInterpretation = ()=>{
            uni.navigateTo({
                url: '/pages/startInterpretation/index'
            });
        }
        const back = ()=>{
            uni.$emit("back",{data: true});
            uni.navigateBack()
        }
        const reShoot = ()=>{
            uni.$emit("back",{data: true});
            uni.navigateBack()
        }
        return {
            ...toRefs(data),
            startInterpretation,
            back,
            reShoot
        }
    }
})
</script>
<style lang="stylus" scoped>
.videoComponents{
    width 100vw
    height: 100vh;
    video{
        width: 100%;
        height: 100%;
        position relative;
        .navBar{
            box-sizing: border-box
            position: absolute;
            top:0
            left:0;
            width: 100vh;
            font-size:32rpx;
            color:#fff;
            z-index:100;
            text-align: left;
            display: flex;
            background: rgba(17,17,17,.4);
            // filter: blur(1rpx)
            overflow: hidden
            z-index:10;
            display: flex;
            align-items: center
            image{
                width:64rpx;
                height: 64rpx;
                margin-left:28rpx;
                z-index:99999999;
                // filter: blur(0)

            }
        }
        .operate{
            position: absolute;
            bottom:10rpx
            left:0;
            height:190rpx;
            width:100vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            padding:  0 26rpx;
            font-size:32rpx;
            line-height:100rpx;
            text-align: center;
            background: rgba(17,17,17,.4);
            // filter: blur(1rpx)
            overflow: hidden
            z-index:10
            .reShoot{
                width: 276rpx;
                height: 100rpx;
                border-radius: 32rpx;
                border: 4rpx solid #FFFFFF;
                color: #fff;
                z-index:999;
                // filter: blur(0)

            }
            .startInterpretation{
                width: 398rpx;
                height: 100rpx;
                background: #FFD300;
                border-radius: 32rpx;
                color:#111111;
                z-index:999;
                // filter: blur(0)
            }
        }
    }

}

</style>